<template>
  <div class="title">
    <h2>当前求和为: {{ sum }}</h2>
    <h2>当前通过复杂运算求和: {{ bigSum }}</h2>
	<br>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
	</select>
    <button @click="jia(n)">+</button>
    <button @click="jian(n)">-</button>
    <button @click="ji(n)">当前和为奇数再加</button>
    <button @click="slide(n)">等一等再加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

export default {
  name: 'App',
  data() {
    return {
      n: 1 //用户选择数字
    }
  },
  computed:{
	// sum(){
	// 	return this.$store.state.sum
	// },
	// 借助mapState生成计算属性，在state中读取数据（对象写法）
	// ...mapState({
	// 	sum:'sum',
	// }),
	// 数组写法
	...mapState(['sum']),
	// bigSum(){
	// 	return this.$store.getters.bigSum
	// },
	...mapGetters(['bigSum'])
  },
  methods: {
    // jia() {
    //   this.$store.commit('JIA', this.n) // 简单逻辑 通过commit 直接将行为 递给 mutations对象
    // },
    // jian() {
    //   this.$store.commit('JIAN', this.n)
    // },

    ...mapMutations({jia:'JIA',jian:'JIAN'}),
    // ji() {
    //   this.$store.dispatch('ji', this.n) // 复杂逻辑  先递交给 actions 通过它 递给mutations对象
    // },
    // slide() {
    //   this.$store.dispatch('slide', this.n)
    // }
    ...mapActions({ji:'ji',slide:'slide'})
  }
}
</script>

